<template>
  <!--    <el-form v-model="dialogVisible" width="80%" title="操作步骤" destroy-on-close center>-->
    <el-form width="80%" title="操作步骤" >
        <template #default>

            <el-row style="margin-top: 10px;">
                <el-col :span="24">
                    <el-table ref="stepItemTable" @selection-change="handleSelectionChange" :data="stepItems" border :stripe="true" style="width: 100%">
                        <el-table-column type="selection" width="55" />
                        <el-table-column prop="processStepCode" label="顺序编号"  />
                        <el-table-column prop="processStepUrl" label="材料URL"  />
                        <el-table-column prop="processStepDescription" label="步骤说明"  />
                        <el-table-column prop="processStepDevice" label="辅助设备"  />
                        <el-table-column prop="processStepMaterial" label="辅助材料"  />
                        <el-table-column prop="processStepNotes" label="备注" />
                    </el-table>
                </el-col>
            </el-row>
            <!-- 列表部分结束 -->
            <!-- 分页部分开始 -->
            <el-row style="margin-top: 10px;">
                <el-col :span="24">
                    <el-pagination background @change="pageChange" layout="prev, pager, next" v-bind:page-size="limit" :total="total" />
                </el-col>
            </el-row>
            <!-- 分页部分结束 -->


        </template>
        <!-- footer插槽中放两个按钮 -->
        <template #footer>
            <el-row>
                <el-col :span="20"></el-col>
                <el-col :span="4">
                    <el-button type="primary" @click="closeWin">关闭</el-button>
                </el-col>
            </el-row>
        </template>
    </el-form>
<!--    <StepItemAddWin :visible="stepItemAddWinDialogVisible" :processId="processId" @optionCompleted="addStepItemOptionCompleted"/>-->
<!--    <StepItemEditWin :visible="stepItemEditWinDialogVisible" :processStepId="processStepId" @optionCompleted="editStepItemOptionCompleted"/>-->
</template>

<script>
import {watch} from "vue";
import StepItemRequest from '../../../../api/processStep.js';

import StepItemAddWin from './step-item-add-win.vue';
import processRequest from "@/api/process.js";
import stepItem from "@/views/pro/process/step/step-item.vue";
import StepItemEditWin from "@/views/pro/process/step/step-item-edit-win.vue";

export default {
    props:["visible","processId"],// 属性
    emits:["optionCompleted"],
    name: "step-item.vue",
    components:{
        // StepItemEditWin,
        // StepItemAddWin
    },
    data(){//数据模型
        return{
            dialogVisible: false, // 弹窗标记
            queryStepItem:{},// 绑定查询条件
            stepItems:[],// 存储查询的item列表
            total:0,// 总记录数
            limit:10,// 每页显示的记录
            currentPage:1,// 当前页码
            editBtnDisabled:true,// 编辑按钮是否禁用
            deleteBtnDisabled:true,// 删除按钮是否禁用
            currentStepType:undefined,

            processStepId:'',// 编辑步骤的id
            editProcessVisible:false,
            editProcessStepId:-1,

            stepItemAddWinDialogVisible:false, // 添加字典项弹窗标志
            stepItemEditWinDialogVisible:false
        }
    },methods:{
        // deleteStep(processStepId) {//手动传参，所以这里需要接收参数
        //     //所以实际上下面的这一行可以这么写
        //     StepItemRequest.deleteStep(processStepId, res => {
        //         this.$message({
        //             type: 'success',
        //             message: '删除工序成功!'
        //         });
        //         this.loadStepItems(this.processId);
        //     });
        // },
        // deleteBtnHandler(){
        //     let selectionRows = this.$refs.stepItemTable.getSelectionRows();
        //     let stepItems = new Array();
        //     selectionRows.forEach(row => {
        //         stepItems.push(row.processStepId);
        //     })
        //     StepItemRequest.deleteSteps(stepItems,res =>{
        //         this.$message({
        //             type: 'success',
        //             message: '删除步骤成功!'
        //         });
        //         this.loadStepItems(this.processId);
        //     });
        // },
        // editBtnHandler(){
        //     let editStep = this.$refs.stepItemTable.getSelectionRows()[0];
        //     if (editStep != undefined) {
        //         this.editProcessStepId = editStep.processStepId;
        //         this.editProcessVisible = true;
        //     } else {
        //         this.$message({
        //             type: 'warning',
        //             message: '请选择要编辑的工序!'
        //         });
        //     }
        // },
        // editStepItemOptionCompleted(){
        //     this.stepItemEditWinDialogVisible = false;
        //     this.loadStepItems(this.processId);
        // },
        // /**
        //  * 添加字典项操作完成处理事件
        //  */
        // addStepItemOptionCompleted(){
        //     // 关闭弹窗
        //     this.stepItemAddWinDialogVisible = false;
        //     // 重新加载数据
        //     this.loadStepItems(this.processId);
        // },
        /**
         * 翻页事件
         */
        pageChange(currentPage,currentLimit){

        },
        // handleSelectionChange(){
        //     let selectionRows = this.$refs.stepItemTable.getSelectionRows();
        //     if (selectionRows.length == 0) {
        //         this.editBtnDisabled = true;
        //         this.deleteBtnDisabled = true;
        //     } else if (selectionRows.length == 1) {
        //         this.editBtnDisabled = false;
        //         this.deleteBtnDisabled = false;
        //     } else {
        //         this.editBtnDisabled = true;
        //         this.deleteBtnDisabled = false;
        //     }
        // },
        // /**
        //  * 行编辑按钮事件
        //  * @param stepItemId
        //  */
        // toEditStepItem(processStepId){
        //     this.processStepId = processStepId;
        //     this.stepItemEditWinDialogVisible = true;
        // },
        // /**
        //  * 弹窗显示新增字典项
        //  * 工具栏中的新增按钮事件
        //  */
        // toAddStepItem(){
        //     this.stepItemAddWinDialogVisible = true;
        // },
        /**
         * 关闭当前的窗体
         */
        closeWin(){
            // 通知父窗体，操作完成
            this.$emit("optionCompleted");
        },
        /**
         * 加载字典项列表
         */
        loadStepItems(processId){
            // 准备参数
            this.queryStepItem.page = this.currentPage;
            this.queryStepItem.limit = this.limit;
            this.queryStepItem.processId = this.currentStepType;
            if(processId)
                this.queryStepItem.processId = processId;
            StepItemRequest.loadStepItem(this.queryStepItem,res => {
                console.log(res)
                // 赋值
                this.stepItems = res.data.data;
                this.total = res.data.total;
            });
        }
    },mounted(props) {
        // this.loadStepItems();
        this.loadStepItems(this.processId);
        // 侦听props   一旦发生变化，就会出发下面的函数
        watch(() => this.visible, (newVal, oldVal) => {
            // 将最新的值设置给弹窗的dialogVisible属性
            this.dialogVisible = newVal;
            if(this.dialogVisible){
                this.loadStepItems(this.processId);
            }
        });
        watch(()=>this.processId,(newVal,oldVal)=>{
            this.currentStepType = newVal;
            if(this.dialogVisible){
                this.loadStepItems(this.processId);
            }
        });
        // console.log(this.processId)

    }
}
</script>

<style scoped>

</style>